<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我要还款</title>
    <link type="text/css" rel="stylesheet" href="css/index.css"/>
    <link type="text/css" rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css"/>
    <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="vue/vue.min.js"></script>
    <script type="text/javascript" src="axios/axios.min.js"></script>
    <script type="text/javascript" src="js/pay_back2.js"></script>
</head>
<body>
<div id="header"></div>

<div class="container">
    <a href="jump?url=pay_back" class="btn btn-info" style="margin-right: 5px">未还</a>
    <a href="jump?url=pay_back2" class="btn btn-info" style="margin-right: 5px">已还</a>
    <a href="jump?url=pay_back3" class="btn btn-info">逾期</a>
</div>

<div style="margin-top: 10px"></div>

<div id="app" class="container">
    <div v-if="pageInfo.list.length === 0">无</div>
    <div v-else>
        <table class="table table-bordered table-hover">
            <tr>
                <th>#</th>
                <th>还款金额</th>
                <th>还款时间</th>
                <th>还款方式</th>
                <th>是否逾期</th>
                <th>逾期金额</th>
                <th>贷款开始时间</th>
            </tr>
            <tr v-for="(item,index) in pageInfo.list" :key="item.repaymentId">
                <td>{{pageInfo.startRow + index}}</td>
                <td>{{item.shouldPayBack.spbMoney + item.overdue.omoney}}</td>
                <td>{{item.repaymentTime.substr(0,10)}}</td>
                <td>{{item.repaymentMethod}}</td>
                <td>{{item.overdue.oid?'是':'否'}}</td>
                <td>{{item.overdue.omoney}}</td>
                <td>{{item.loan.lendingTime.substr(0,10)}}</td>
            </tr>
        </table>

        <div class="row">
            <div class="col-md-6">
                <span style="font-size: 18px">当前第{{pageInfo.pageNum}}页，共{{pageInfo.pages}}页，共{{pageInfo.total}}条记录</span>
            </div>
            <div class="col-md-6">
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li v-if="pageInfo.isFirstPage" class="disabled"><a @click.prevent="" aria-label="Previous"><span aria-hidden="true">首页</span></a></li>
                        <li v-else>
                            <a @click.prevent="getRepaymentCustom(pageInfo.navigateFirstPage)" aria-label="Previous">
                                <span aria-hidden="true">首页</span>
                            </a>
                        </li>
                        <li v-if="pageInfo.hasPreviousPage">
                            <a @click.prevent="getRepaymentCustom(pageInfo.prePage)" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li v-else class="disabled"><a @click.prevent="" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
                        <li v-for="pageNum in pageInfo.navigatepageNums" :key="pageNum" :class="pageNum == pageInfo.pageNum?'active':''"><a @click.prevent="getRepaymentCustom(pageNum)">{{pageNum}}</a></li>
                        <li v-if="pageInfo.hasNextPage">
                            <a @click.prevent="getRepaymentCustom(pageInfo.nextPage)" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                        <li v-else class="disabled"><a @click.prevent="" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
                        <li v-if="pageInfo.isLastPage" class="disabled"><a @click.prevent="" aria-label="Next"><span aria-hidden="true">尾页</span></a></li>
                        <li v-else>
                            <a @click.prevent="getRepaymentCustom(pageInfo.navigateLastPage)" aria-label="Next">
                                <span aria-hidden="true">尾页</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>

<div style="margin-top: 70px;"></div>

<div id="footer"></div>
</body>
</html>